<template>
  <view class="privacy-container">
    <!-- 渐变头部 -->
    <view class="header gradient-bg">
      <uni-icons type="contact" size="30" color="#fff" />
      <text class="header-title">隐私政策</text>
    </view>

    <!-- 内容区域 -->
    <uni-card class="content-card">
      <!-- 版本信息 -->
      <view class="version-box">
        <uni-tag text="最新版本" type="primary" inverted />
        <view class="version-text">
          <text>更新日期:2025-3-13</text>
          <text>版本:1.0.0</text>
        </view>
      </view>

      <!-- 条款内容 -->
      <uni-section title="信息收集与使用" titleFontSize="20px">
        <uni-icons type="list" size="20" color="#4a90e2" slot="decoration" />
        <view class="section-content">
          <text class="highlight">必要信息类型：</text>
          <uni-list>
            <uni-list-item title="账号基本信息" showExtraIcon :extraIcon="{type: 'checkbox-filled'}"/>
            <uni-list-item title="设备标识信息" showExtraIcon :extraIcon="{type: 'checkbox-filled'}"/>
            <uni-list-item title="服务使用日志" showExtraIcon :extraIcon="{type: 'checkbox-filled'}"/>
          </uni-list>
        </view>
      </uni-section>

      <uni-divider />
      
      <uni-section title="数据安全" titleFontSize="20px">
        <uni-icons type="locked" size="20" color="#4a90e2" slot="decoration" />
        <view class="security-grid">
          <uni-grid :column="3">
            <uni-grid-item>
              <view class="grid-item">
                <uni-icons type="shield" size="24" color="#4a90e2" />
                <text>SSL加密</text>
              </view>
            </uni-grid-item>
            <uni-grid-item>
              <view class="grid-item">
                <uni-icons type="eye" size="24" color="#4a90e2" />
                <text>权限控制</text>
              </view>
            </uni-grid-item>
            <uni-grid-item>
              <view class="grid-item">
                <uni-icons type="gear" size="24" color="#4a90e2" />
                <text>定期审计</text>
              </view>
            </uni-grid-item>
          </uni-grid>
        </view>
      </uni-section>

      <uni-divider />

      <uni-section title="用户权利" titleFontSize="20px">
        <uni-icons type="person" size="20" color="#4a90e2" slot="decoration" />
        <uni-list>
          <uni-list-item title="数据访问权" :rightText="rightsStatus[0]" />
          <uni-list-item title="数据删除权" :rightText="rightsStatus[1]" />
          <uni-list-item title="授权撤回权" :rightText="rightsStatus[2]" />
        </uni-list>
      </uni-section>

      <!-- 联系信息 -->
      <uni-card title="联系我们" isShadow>
        <uni-list>
          <uni-list-item title="客服邮箱" note="1687005735@qq.com" thumb="/static/contact.png">
            <template v-slot:header>
              <uni-icons type="email" size="18" color="#4a90e2" />
            </template>
          </uni-list-item>
          <uni-list-item title="服务热线" note="157-3193-2052" thumb="/static/phone.png">
            <template v-slot:header>
              <uni-icons type="phone" size="18" color="#4a90e2" />
            </template>
          </uni-list-item>
        </uni-list>
      </uni-card>
    </uni-card>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const rightsStatus = ref(['立即申请', '在线提交', '设置中心']);
</script>

<style lang="scss" scoped>
.privacy-container {
  background: #f8fafc;
  min-height: 100vh;
  padding: 16rpx;
}

.gradient-bg {
  background: linear-gradient(135deg, #4a90e2, #4169e1);
}

.header {
  height: 160rpx;
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  border-radius: 24rpx;
  margin-bottom: 24rpx;

  .header-title {
    color: #fff;
    font-size: 40rpx;
    font-weight: 600;
    margin-left: 20rpx;
  }
}

.content-card {
  border-radius: 24rpx !important;
  
  :deep(.uni-card__header) {
    padding: 24rpx 0;
  }
}

.version-box {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  padding: 16rpx;
  background: #f3f9ff;
  border-radius: 12rpx;

  .version-text {
    flex: 1;
    margin-left: 20rpx;

    text {
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.highlight {
  color: #4a90e2;
  font-weight: 500;
  margin: 20rpx 0;
  font-size: 30rpx;
}

.security-grid {
  padding: 16rpx 0;

  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24rpx;

    text {
      margin-top: 12rpx;
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>